<template>
  <el-dialog
    v-model="dialogVisible"
    :title="type === 'add' ? '新增用户' : '编辑用户'"
    width="50%"
  >
    <el-form
      ref="serviceForm"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="昵称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <!-- <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item> -->
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="ruleForm.username"
          :disabled="type === 'edit'"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password" v-if="type === 'add'">
        <el-input v-model="ruleForm.password" type="password"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
import { ElMessageBox } from 'element-plus';
import { addUser, updateUser } from '/@/api/sys/user';

interface IRuleForm {
  id: number | null;
  name: string;
  username: string;
  password: string;
}

export default defineComponent({
  name: 'userForm',
  emits: ['refresh'],
  setup(props, { emit }) {
    const dialogVisible = ref(false);
    const type = ref('add');
    const serviceForm = ref();
    const ruleForm = reactive<IRuleForm>({
      id: null,
      name: '',
      username: '',
      password: ''
    });

    const reset = () => {
      ruleForm.id = null;
      ruleForm.name = '';
      ruleForm.username = '';
      ruleForm.password = '';
      serviceForm.value.resetFields();
      dialogVisible.value = false;
    };

    const display = (editType: string, row: IRuleForm | undefined) => {
      type.value = editType;
      if (editType === 'edit' && row) {
        ruleForm.id = row.id;
        ruleForm.username = row.username;
        ruleForm.password = '';
        ruleForm.name = row.name;
      }
      dialogVisible.value = true;
    };

    const rules = {
      name: [
        {
          required: true,
          message: '昵称',
          trigger: 'blur'
        }
      ],
      username: [
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        {
          min: 5,
          max: 12,
          message: '用户名长度限制5~12位',
          trigger: 'blur'
        }
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
        {
          min: 6,
          max: 12,
          message: '密码长度限制6~12位',
          trigger: 'blur'
        }
      ]
    };

    const submit = async () => {
      serviceForm.value.validate(async (valid: boolean) => {
        // console.log(valid);
        if (valid) {
          if (type.value === 'add') {
            await addUser(ruleForm);
          } else {
            await updateUser(ruleForm);
          }
          emit('refresh');
          reset();
        } else {
        }
      });
    };
    return {
      type,
      rules,
      dialogVisible,
      // ruleForm,
      reset,
      display,
      submit,
      ruleForm,
      serviceForm
      // ...toRefs(ruleForm)
    };
  }
});
</script>
